<template>
  <div class="yxp-scene-en" v-if="isEn">
    <div class="close" @click="handleClose"></div>
    <img src="@/assets/composition/en-icon.png" v-if="type < '3'" class="en-icon"/>
    <img src="@/assets/composition/en1-icon.png" v-if="type === '3'" class="en-icon"/>
    <img src="@/assets/composition/en2-icon.png" v-if="type > '3'" class="en-icon"/>
    <p class="tips">{{title}}</p>
    <div class="btn">
      <div class="btn-item" id="yxp-commp-back4" @click="handleNext">确定</div>
      <div class="btn-item" id="yxp-commp-back5" @click="handleClose">取消</div>
    </div>
  </div>
</template>
<script>
import { saveStep, subVoice } from '@/services/composition.js'
export default {
  name: 'ScenePop',
  props: {
    title: {
      type: String,
      default: ''
    },
    isEn: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: ''
    },
    id: {
      type: Number,
      default: 0
    },
    courseType: {
      type: Number,
      default: 0
    },
    courseId: {
      type: Number,
      default: 0
    },
    project_voice: {
      type: String,
      default: ''
    },
    voiceRad: {
      type: Object,
      defaut: {}
    }
  },
  data () {
    return {}
  },
  mounted () {
    console.log(typeof this.title)
  },
  methods: {
    handleClose () {
      this.$emit('closePop', false)
    },
    handleNext () {
      if (this.type === '6') {
        this.saveAudio()
      } else {
        this.saveStep()
      }
    },
    async saveAudio () {
      console.log(8889)
      this.handleSaveVoice(this.project_voice)
    },
    // 提交录音
    async handleSaveVoice (path) {
      let params = {
        essay_id: this.id,
        score: this.voiceRad.fluency + ',' + this.voiceRad.full + ',' + this.voiceRad.correct,
        voice: path,
        curr_id: this.courseId
      }
      let data = await subVoice(params)
      if (data.code === 1) {
        this.$router.push({
          path: '/composition/uploadIndex',
          query: {
            id: this.id,
            course_type: this.course_type,
            courseId: this.courseId
          }
        })
      }
    },
    async saveStep () {
      let params = {
        essay_id: this.id,
        step: this.type
      }
      let data = await saveStep(params)
      if (data.code === 1) {
        if (this.type === '1') {
          this.$router.push({
            path: '/composition/breakTrain',
            query: {
              courseId: this.courseId,
              id: this.id,
              course_type: this.courseType
            }
          })
        } else if (this.type === '2') {
          this.$router.push({
            path: '/composition/retell',
            query: {
              courseId: this.courseId,
              id: this.id,
              course_type: this.courseType
            }
          })
        } else if (this.type === '3') {
          this.$router.push({
            path: '/composition/spell',
            query: {
              courseId: this.courseId,
              id: this.id,
              course_type: this.courseType
            }
          })
        } else if (this.type === '4') {
          this.$router.push({
            path: '/composition/keepOut',
            query: {
              courseId: this.courseId,
              id: this.id,
              course_type: this.courseType
            }
          })
      } else if (this.type === '5') {
          this.$router.push({
            path: '/composition/enRead',
            query: {
              courseId: this.courseId,
              id: this.id,
              course_type: this.courseType
            }
          })
      } else {
        this.$toast(data.info)
      }
    }
  }
  }
}
</script>
<style lang='less' scoped>
.yxp-scene-en {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 360px;
    height: 398px;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    z-index: 1200;
    .close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 20px;
      height: 20px;
      background: url(../../../assets/word/close-icon.png) no-repeat;
      background-size: 20px 20px;
      cursor: pointer;
      &:hover {
        background-image: url(../../../assets/word/close-hover.png);
      }
    }
    .en-icon {
      display: inline-block;
      width: 234px;
      height: 234px;
      margin: 6px auto 0;
    }
    .tips {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #333;
      padding: 0 0 48px;
    }
    .btn {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-left: 40px;
      padding-right: 40px;
      &-item {
        width: 130px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        background: #27BFA3;
        border-radius: 100px;
        cursor: pointer;
        cursor: pointer;
        &:first-child {
          margin-right: 20px;
        }
         &:hover {
          background: #18A38A;
        }
      }
    }
  }
</style>
